<template>
  <div class="merchat-list">
    <Breadcrumb>
      <BreadcrumbItem v-for="(name, i) in breadcrumb" :key="i">{{ name }}</BreadcrumbItem>
    </Breadcrumb>
    <div class="list-title">查询条件</div>
    <Row type="flex">
      <Form ref="formInline" :model="formInline" inline :label-width="180" label-position="left">
        <FormItem prop="reportDeptName" label="报备人组织架构（V10商户）：">
          <Input v-model="formInline.reportDeptName" placeholder="报备人组织架构（V10商户）" clearable style="width: 200px" />
        </FormItem>
        <FormItem prop="date" label="报备时间：" class="report-date-range">
          <DatePicker type="daterange" @on-change="selectDate" placeholder="报备时间" style="width: 200px"></DatePicker>
        </FormItem>
        <FormItem prop="searchContent" class="search-content">
          <Input v-model="formInline.searchContent" placeholder="楼盘名称、客户姓名、客户电话、报备人姓名、报备人电话" clearable style="width: 300px" />
        </FormItem>
        <Button type="success" @click="getList">查询</Button>
      </Form>
    </Row>
    <Table stripe border ref="selection" :columns="columns" :data="dataList" ></Table>
    <Page :total="total" show-sizer show-elevator show-total @on-change="changePageNum" @on-page-size-change="changePageSize" />
    <ReportActionDetailModal ref="reportActionDetail" v-bind:reportInfo="report" />
  </div>
</template>

<script>
import { formatTime } from '@/utils'
import Api from '@/api'
import ReportActionDetailModal from './reportActionDetailModal.vue'

const report = Api.report
export default {
  name: 'list',
  components: {
    ReportActionDetailModal
  },
  data() {
    return {
      breadcrumb: ['报备管理', 'V10报备同步记录'],
      formInline: {
        createTimeEnd: '',
        createTimeStart: '',
        reportDeptName: '', // 报备人组织架构
        searchContent: ''
      },
      report: {},
      columns: [
        {
          type: 'selection',
          title: '选择',
          key: 'name',
          width: 50
        },
        {
          title: '报备来源',
          key: 'source'
        },
        {
          title: '楼盘名称',
          key: 'premisesName'
        },
        {
          title: '客户姓名',
          key: 'customerName'
        },
        {
          title: '客户电话',
          key: 'customerPhone'
        },
        {
          title: '报备人姓名',
          key: 'reportName'
        },
        {
          title: '报备人手机号',
          key: 'reportPhone'
        },
        {
          title: '报备人组织架构',
          key: 'reportDeptName'
        },
        {
          title: '报备时间',
          key: 'createTime',
          minWidth: 160,
          width: 160,
          render: (h, params) => (
            h('div', {}, formatTime(params.row.createTime, 'second'))
          )
        },
        {
          title: '最后同步时间',
          key: 'lastUpdateTime',
          minWidth: 160,
          width: 160,
          render: (h, params) => (
            h('div', {}, formatTime(params.row.lastUpdateTime, 'second'))
          )
        },
        {
          title: '实际交易状态',
          key: 'confirmStatus'
        },
        {
          title: '同步状态',
          key: 'syncStatus',
          render: (h, params) => {
            return h('div', [
              h('Span', {
                style: {
                  color: params.row.syncStatus === '同步异常' ? '#ed4014' : '#000'
                }
              }, params.row.syncStatus)
            ])
          }
        },
        {
          title: '操作',
          key: '',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.showReportDetail(params.row);
                  }
                }
              }, '查询'),
            ]);
          }
        },
      ],
      page: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      dataList: []
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    selectDate(date) {
      this.formInline.createTimeStart = date[0]
      this.formInline.createTimeEnd = date[1]
    },
    // 分页变化
    changePageNum(pageNum) {
      this.getList({ pageNum })
    },
    // 条数变化
    changePageSize(pageSize) {
      this.getList({ pageSize })
    },
    async handleReset(name) {
      this.$refs[name].resetFields()
      this.page = {
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    },
    async getList(paramsPage = null) {
      const _self = this
      let pageNum
      let pageSize
      let page
      const statePage = this.page
      if (paramsPage) {
        pageNum = paramsPage.pageNum || statePage.pageNum
        pageSize = paramsPage.pageSize || statePage.pageSize
        page = { pageNum, pageSize }
        this.page = { pageNum, pageSize }
      } else {
        page = statePage
      }
      const formInline = this.formInline
      const value = {}
      Object.keys(formInline).forEach(key => {
        if (formInline[key]) {
          value[key] = formInline[key]
        }
      })
      const params = {
        page,
        ...value
      }
      const { responseCode, data } = await this.$request(report.v10ReportList, params)
      if (responseCode === '1') {
        _self.dataList = data.list;
        _self.total = data.totalCount
      }
    },
    showReportDetail(params) {
      this.report = params;
      this.$refs.reportActionDetail.cleanParams();
      this.$refs.reportActionDetail.initData(params);
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
